<template>
    <div class="scroll" ref="scroll">
        <div class="wrap">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    import betterscroll from "better-scroll";
    export default {
        name: "BScroll",
        props: {
            pullDownRefresh: {
                type: Boolean,
                default: false
            }
        },
        created() {
            //你如果想在当前的这个生命周期下面操作下一个生命期的数据
            //created的生命周期里面，是不能够去操作data里面的数据
            //如果你又要用
            this.$nextTick(() => {
                if (!this.scroll) {
                    this.scroll = new betterscroll(this.$refs.scroll, {
                        pullDownRefresh: this.pullDownRefresh
                    });
                    if (this.pullDownRefresh) {
                        //说明开启了下拉刷新
                        this.scroll.on("pullingDown", () => {
                            //你只负责监控这个事件就行了，
                            //至于具体请求什么数据，由外边决定
                           this.$emit("pullingDown",this.scroll);
                           
                        });
                    }
                } else {
                    this.scroll.refresh();
                }
            })

        }
    }
</script>

<style lang="scss" scoped>
    .scroll {
        height: 100%;
        overflow: auto;
    }
</style>